<template>
  <el-form :model="addressForm" ref="addressFormRef" :rules="addressFormRules" label-width="90px">
    <el-form-item prop="name" :label="regionType=='1'?'收件人':'Name'" size="small">
      <el-input v-model="addressForm.name" maxlength="80"></el-input>
      <slot></slot>
    </el-form-item>
    <el-form-item prop="phone" :label="regionType=='1'?'电话':'Phone'" size="small">
      <el-input v-model="addressForm.phone"></el-input>
    </el-form-item>
    <el-form-item prop="address" :label="regionType=='1'?'省市区':'City'" size="small">
      <el-input v-model="addressForm.city" maxlength="120"></el-input>
    </el-form-item>
    <el-form-item prop="city" :label="regionType=='1'?'详细地址':'Address'" size="small">
      <el-input v-model="addressForm.address"></el-input>
    </el-form-item>
    <el-form-item prop="postCode" :label="regionType=='1'?'邮编':'PostCode'" size="small">
      <el-input v-model="addressForm.postCode"></el-input>
    </el-form-item>
    <el-form-item v-show="regionType=='2'" prop="country" label="Country" size="small">
      <el-input v-model="addressForm.country" disabled></el-input>
    </el-form-item>
  </el-form>
</template>

<script lang="ts">
import {Component, Prop,Vue} from "vue-property-decorator";
import {Address} from "@/common/interface";
import {Form} from "element-ui";
const validateName = (rule,value,callback)=>{
  const reg = /^[a-zA-Z0-9,_@#，'-.\s]{0,}$/
  if(value && !reg.test(value)){
    callback(new Error('名字只允许包含a至z,A至Z,0至9,_@#，\'-.以及空格'))
  }else{
    callback()
  }
}

const validateAddress = (rule,value,callback)=>{
  const reg = /^[a-zA-Z0-9,._#\s]{0,}$/;
  if(value && !reg.test(value)){
    callback(new Error('地址只能输入字母,数字,下划线,#号,英文逗号,英文点号,空格'))
  }else{
    callback()
  }
}
@Component
export default class AddressForm extends Vue{
  @Prop() addressForm!:Address
  @Prop() regionType!:string
  private addressFormRules = {
    name:[this.$formValidator.empty('姓名'),{
      validator:validateName,trigger:'blur'
    }],
    phone:[this.$formValidator.empty('电话')],
    address:[this.$formValidator.empty('地址'),{
      validator:validateAddress,trigger:'blur'
    }],
    city:[this.$formValidator.empty('城市')],
    postCode:[this.$formValidator.empty('邮编')],
    country:[this.$formValidator.empty('国家')],
  }

  validate(){
    return (this.$refs.addressFormRef as Form).validate()
  }

  clearValidate(){
    (this.$refs.addressFormRef as Form).clearValidate()
  }
}
</script>

<style scoped>

</style>